<template>
  <el-dialog top="20px" :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" title="群组用户" width="1100px" @close="closeDlg">
    <div class="main-bill-header">
      <table style="width:98%">
        <tr>
          <td width="40%">群组名称：<span style="font-weight:600;color:blue;">{{ entity.name }}</span></td>
          <td width="30%">群组编号：<span style="font-weight:600;color:blue;">{{ entity.code }}</span></td>
          <td width="30%">
            <el-button type="primary" icon="el-icon-circle-plus" @click="add">添加用户</el-button>
            <el-button type="default" icon="el-icon-refresh" @click="getUsers" />
          </td>
        </tr>
      </table>
    </div>
    <el-table
      ref="detailTable"
      v-loading="loading"
      stripe
      :data="detailList"
      border
      :height="350"
      class="rownum-table"
    >
      <el-table-column
        type="index"
        width="50"
      />
      <el-table-column prop="loginName" label="账号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="departmentName" label="所属部门" />
      <el-table-column prop="duty" label="职务" />
      <el-table-column prop="stateName" label="职位状态" width="80" />
      <el-table-column prop="status" label="账号状态" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statusFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="left">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeDlg">关闭</el-button>
    </div>
    <selectUserDlg ref="selectUserDlg" />
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import selectUserDlg from '../user/selectdlg'
export default {
  name: 'GroupUser',
  components: { selectUserDlg },
  data() {
    return {
      loading: true,
      visable: false,
      entity: {
        id: '',
        name: '',
        code: ''
      },
      detailList: []
    }
  },
  methods: {
    // 获取数据
    show(group) {
      // clone
      this.entity = {}
      this.entity.name = group.name
      this.entity.id = group.id
      this.entity.code = group.code
      this.visable = true
      this.getUsers()
    },
    getUsers() {
      this.loading = true
      request({ url: '/sys/group/findUsersByGroupId', params: { id: this.entity.id }, method: 'get' })
        .then(data => {
          this.detailList = data || []
          this.loading = false
        }).catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    },
    add() {
      this.$refs.selectUserDlg.show()
    },
    selectedUsers(users) {
      if (users && users.length > 0) {
        const addset = []
        for (let i = 0; i < users.length; i++) {
          let find = false
          for (let j = 0; j < this.detailList.length; j++) {
            if (users[i].id === this.detailList[j].id) {
              find = true
              break
            }
          }
          if (!find) {
            addset.push({ userId: users[i].id, groupId: this.entity.id })
          }
        }
        if (addset.length > 0) {
          this.loading = true
          request({ url: '/sys/group/addGroupUsers', data: addset, method: 'post' })
            .then(data => {
              this.loading = false
              this.getUsers()
            }).catch(err => {
              this.loading = false
              this.$message.error(err.message)
            })
        }
      }
    },
    handleDelete(row) {
      this.$confirm('此操作将删除[' + row.name + '], 是否继续?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDelete(row.id)
        })
    },
    doDelete(id) {
      this.loading = true
      request({ url: '/sys/group/deleteGroupUser', data: { userId: id, groupId: this.entity.id }, method: 'post' })
        .then(res => {
          this.loading = false
          this.getUsers()
        })
        .catch(e => {
          this.loading = false
          this.$message.error('删除出错！' + e.message ? e.message : '')
        })
    },
    closeDlg() {
      this.visable = false
      this.detailList = []
      this.entity.name = ''
      this.entity.code = ''
    }

  }
}
</script>

